import QtQuick 1.0
/***************************************************************************************************
*Importing the custom components from the Shapes lib(MultiTouchItem,Ellipse defined in main.cpp).  *
***************************************************************************************************/
import Shapes 1.0

Item {
    id: screen
    width: 1600
    height: 1100
    clip: true;

    /***********************************************************************************************
    *The games background                                                                          *
    ***********************************************************************************************/
    Image {
        id: background
        objectName: "background"
        /*******************************************************************************************
        *Make the background tile horizontally to fill the scene.                                  *
        *******************************************************************************************/
        fillMode: Image.TileHorizontally
        source: ":/images/background.jpg"
        /*******************************************************************************************
        *Define a translation, to be able to move the background not changing its x or y position. *
        *******************************************************************************************/
        transform: Translate { id: background_transl; }
    }

    /***********************************************************************************************
    *Properties for the characters start position.                                                 *
    ***********************************************************************************************/
    property int kolobokStartX;
    property int kolobokStartY;

    /***********************************************************************************************
    *Properties indicating if the menu needs building                                              *
    ***********************************************************************************************/
    property bool buildMenu;
    buildMenu: true;

    /***********************************************************************************************
    *A rock component, used for building platforms.                                                *
    ***********************************************************************************************/
    Component {
        id: rock
        Image {
            objectName: "rock"
            z: 1;
            width: 100; height: 100
            source: ":/images/brick.jpg"
        }
    }

    /***********************************************************************************************
    *A cactus component, used as an obstacle which hurts the character when touched.               *
    ***********************************************************************************************/
    Component {
        id: cactus
        Image {
            objectName: "cactus"
            source: ":/images/cactus.png"
        }
    }

    /***********************************************************************************************
    *A click able item, used as a button triggering the game to quit.                              *
    ***********************************************************************************************/
    Item {
        /*******************************************************************************************
        *The object name, used while detecting collisions.                                         *
        *******************************************************************************************/
        objectName: "quit"
        width: 200; height: 200
        opacity: 0.5
        /*******************************************************************************************
        *The z value set 3, here the top layer.                                                    *
        *******************************************************************************************/
        x: 1400; y:0; z:5
        Image {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            width: 100; height: 100
            source:  ":/images/close.png"
        }

        /*******************************************************************************************
        *The mouse area responsible for triggering quit when clicked.                              *
        *******************************************************************************************/
        MouseArea {
            anchors.fill: parent
            onClicked: {
                if(menuLayer.state == "Hidden")
                    Qt.quit()
                else
                    menuLayer.state = "Hidden"
            }
        }
    }

    /***********************************************************************************************
    *A click able item, used as a button triggering menu hiding/showing.                              *
    ***********************************************************************************************/
    Item {
        /*******************************************************************************************
        *The object name, used while detecting collisions.                                         *
        *******************************************************************************************/
        objectName: "menu"
        width: 200; height: 200
        opacity: 0.5
        /*******************************************************************************************
        *The z value set 3, here the top layer.                                                    *
        *******************************************************************************************/
        x: 0; y:0; z:5
        Image {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            width: 100; height: 100
            source:  ":/images/shop.png"
        }

        /*******************************************************************************************
        *The mouse area responsible for triggering menu hiding/showing when clicked.               *
        *******************************************************************************************/
        MouseArea {
            anchors.fill: parent
            onClicked:{
                if(menuLayer.state == "Hidden")
                    menuLayer.state = "Shown"
                else
                    menuLayer.state = "Hidden"
            }
        }
    }

    /***********************************************************************************************
    *A Text item displaying the current fps.                                                       *
    ***********************************************************************************************/
    Text {
        /*******************************************************************************************
        *A binding the text property to the views fps property.                                    *
        *******************************************************************************************/
        text: View.fps.toFixed(2) + " fps"
        font.pointSize: 24
        color: "red"
    }

    MultiTouchItem {
        id: arrow_left;
        /*******************************************************************************************
        *The object name, used while detecting collisions.                                         *
        *******************************************************************************************/
        objectName: "arrow"
        source:  ":/images/arrow_left.png"
        width: 200; height: 200
        /*******************************************************************************************
        *The z value set 3, here the top layer.                                                    *
        *******************************************************************************************/
        x: 0; y:800; z:3
    }

    MultiTouchItem {
        id: arrow_right;
        /*******************************************************************************************
        *The object name, used while detecting collisions.                                         *
        *******************************************************************************************/
        objectName: "arrow"
        source:  ":/images/arrow_right.png"
        width: 200; height: 200
        /*******************************************************************************************
        *The z value set 3, here the top layer.                                                    *
        *******************************************************************************************/
        x: 250; y:800; z:3
    }

    MultiTouchItem {
        id: arrow_up;
        /*******************************************************************************************
        *The object name, used while detecting collisions.                                         *
        *******************************************************************************************/
        objectName: "arrow"
        source:  ":/images/arrow_up.png"
        width: 200; height: 200
        /*******************************************************************************************
        *The z value set 3, here the top layer.                                                    *
        *******************************************************************************************/
        x: 1400; y:800; z:3;
    }

    /***********************************************************************************************
    *The item representing the games scene, used for holding the game objects.                     *
    ***********************************************************************************************/
    Item {
        id: scene;
        height: parent.height
        width:  1600;
        /*******************************************************************************************
        *Define a translation, to be able to move the scene not changing its x or y position.      *
        *******************************************************************************************/
        transform: Translate { id: screen_transl; }
    }

    /***********************************************************************************************
    *The item used as the parent item of the menu.                                                 *
    ***********************************************************************************************/
    Item{
        id: menuLayer;
        height: parent.height
        width: parent.width
        z: 4

        /*******************************************************************************************
        *Define menu layer hidden and shown states.                                                *
        *******************************************************************************************/
        state: "Hidden"
        states: [
            State {
                name: "Hidden"
                PropertyChanges {
                    target: menuLayer
                    x: -1 * menuLayer.width
                }
            },
            State {
                name: "Shown"
                PropertyChanges {
                    target: menuLayer
                    x: 0
                }
            }
        ]
    }

    /***********************************************************************************************
    *The function used to scroll the background and scene.                                         *
    ***********************************************************************************************/
    function scrollScene(dx)
    {
        if (Math.abs(dx) > 1) {
            screen_transl.x -= dx;
            /***************************************************************************************
            *Moving the background by half of the scenes dx to achieve perspective.                *
            ***************************************************************************************/
            background_transl.x -= dx/2;
        }
    }

    /***********************************************************************************************
    *The function used to reset the backgrounds and scenes translation.                            *
    ***********************************************************************************************/
    function resetScrollScene()
    {
        screen_transl.x = 0;
        background_transl.x = 0;
    }

    /***********************************************************************************************
    *The function used to build the level.                                                         *
    ***********************************************************************************************/
    function buildLevel()
    {
        for(var i = 0; i < scene.children.length; ++i)
            scene.children[i].destroy();

        /*******************************************************************************************
        *Creating the Kolobok and Fire components.                                                 *
        *******************************************************************************************/
        var kolobokComponent = Qt.createComponent(":/qml/Kolobok.qml");
        var fireComponent = Qt.createComponent(":/qml/Fire.qml");
        var kolob = null;

        /*******************************************************************************************
        *Populate the scene with items.                                                            *
        *******************************************************************************************/
        for (var y=0; y<Level.rowCount; ++y) {
            for ( var i=0; i<Level.columnCount; ++i) {
                /***********************************************************************************
                *Get the name of the item at index y,i.                                            *
                ***********************************************************************************/
                var item_name = Level.item(y,i);
                var item = null;
                if ( item_name == '=') {
                    /*******************************************************************************
                    *Create a new rock component.                                                  *
                    *******************************************************************************/
                    item = rock.createObject(scene);
                } else if (item_name == 'k') {
                    /*******************************************************************************
                    *Create a new kolobok component, and set the kolob pointer.                    *
                    *******************************************************************************/
                    item = kolobokComponent.createObject(scene);
                    kolob = item;
                } else if (item_name == 'f') {
                    /*******************************************************************************
                    *Create a new fire component.                                                  *
                    *******************************************************************************/
                    item = fireComponent.createObject(scene);
                } else if (item_name == 'c') {
                    /*******************************************************************************
                    *Create a new cactus component.                                                *
                    *******************************************************************************/
                    item = cactus.createObject(scene);
                }
                /***********************************************************************************
                *If item created, set the new items position.                                      *
                ***********************************************************************************/
                if (item) {
                    item.y = y*100 + 100 - item.height;
                    item.x = i*100;
                }
            }
        }

        /*******************************************************************************************
        *Set the backgrounds width to fit the loaded level column count.                           *
        *******************************************************************************************/
        var newBackgroundWidth = (Level.columnCount+2) * 100;
        background.width = newBackgroundWidth;

        /*******************************************************************************************
        *Start playing music.                                                                      *
        *******************************************************************************************/
        Level.startBGSound();

        /*******************************************************************************************
        *If kolob created, set the start positions to the new kolob positions and start kolob fall.*
        *******************************************************************************************/
        if (kolob) {
            kolobokStartX = kolob.x;
            kolobokStartY = kolob.y;
            kolob.fallDown();
        }

        /*******************************************************************************************
        *Build menu if necessary.                                                                  *
        *******************************************************************************************/
        if(buildMenu){
            var menuComponent = Qt.createComponent(":/qml/Menu.qml");
            var item = menuComponent.createObject(menuLayer);
            buildMenu = false;
        }
    }

    /***********************************************************************************************
    *Call the buildLevel function after the main components startup.                               *
    ***********************************************************************************************/
    Component.onCompleted: buildLevel()

    /***********************************************************************************************
    *Connecting the LevelControllers levelReload signal to trigger new level loading.              *
    ***********************************************************************************************/
    Connections {
        target: LevelController
        onLevelReload:{
            resetScrollScene();
            buildLevel();
        }
    }
}
